<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>2d/3d转换</title>
  <style type="text/css">
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   }
   body{
	   perspective: 800px;
   }
   .box {
    width: 300px;
    height: 300px;
    margin: 300px auto 0;
    position: relative;
    transform: rotateX(30deg) rotateY(30deg) rotateZ(30deg);
    transform-style: preserve-3d;
    animation: tr 20s linear infinite;
   }
   .box img{
	   width: 100%;
	   height: 100%;
   }
   @keyframes tr{
    from{transform: rotateX(600deg) rotateY(-300deg) rotateZ(600deg);}
    to{transform: rotateX(1800deg) rotateY(200deg) rotateZ(300deg);}
   }
   .box .item {
    width: 300px;
    height: 300px;
   /* border: 1px red solid; */
    text-align: center;
    line-height: 300px;
    font-size: 50px;
    background-color: rgba(255,255,255,0.1);
    position: absolute;
   }
   .box .item:nth-child(1){
    transform:rotateY(180deg) translateZ(-300px);
   }
   .box .item:nth-child(2){
    transform: rotateY(90deg) translateX(-150px) translateZ(-150px);
   }
   .box .item:nth-child(3){
    transform: rotateY(-90deg) translateX(150px) translateZ(-150px);
   }
   .box .item:nth-child(4){
    transform: rotateX(-90deg) translateY(-150px) translateZ(-150px);
   }
   .box .item:nth-child(5){
    transform: rotateX(90deg) translateY(150px) translateZ(-150px);
   }
  </style>
 </head>
 <body>
  <div class="box">
   <div class="item"><img src="img/1.jpg" alt=""></div>
   <div class="item"><img src="img/2.jpg" alt=""></div>
   <div class="item"><img src="img/3.jpg" alt=""></div>
   <div class="item"><img src="img/4.jpg" alt=""></div>
   <div class="item"><img src="img/5.jpg" alt=""></div>
   <div class="item"><img src="img/6.jpg" alt=""></div>
  </div>
 </body>
</html>
